<template>
  <div class="baseDesign-title">
    <div class="goBack" @click="goBack"><span class="icon"> &#xe628; </span> 返回 </div>
    <div class="topBox">
      <div :class="{label:true, act:router === 'base'}" @click="routeHandle('/approvalFlow/base')"><span>01</span>审批设置</div>
      <div :class="{label:true, act:router === 'table'}" @click="routeHandle('/approvalFlow/table')"><span>02</span>表单设计</div>
      <div :class="{label:true, act:router === 'flow'}" @click="routeHandle('/approvalFlow/flow')"><span>03</span>流程设计</div>
    </div>
    <div class="butList"><span class="look">预览</span> <span class="open" @click="submit">发布</span></div>
  </div>
</template>
<script>
  import {mapGetters} from 'vuex'

  export default {
        name: 'Dashboard',
        props: ['submit'],
        computed:{
            router(){
                return this.$route.path.split('/')[2]
            },
            ...mapGetters([
                'backRest'
            ])
        },
        data(){
          return {
            restVal: 0
          }
        },
        methods:{
            goBack(){
              this.$emit('back', this.restVal++)
              console.log(this.backRest)
              if (this.backRest > 0) {
                this.$confirm('有修改内容未发布, 确认离开吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$store.dispatch('approval/setBack', true)
                    this.$router.push('/approval/admin')
                }).catch(() => {});
              } else {
                this.$router.push('/approval/admin')
              }
            },
            routeHandle(url){
                this.$emit('routHandle', url)
            }
        }
    }
</script>

<style lang="scss">
  .baseDesign {
    &-title {
      opacity: 0;
      animation: opacity 100ms 500ms forwards;
      position: fixed;
      z-index: 999;
      top: 0px;
      left: 0px;
      width: 100%;
      color: #00074a;
      background: #eceffc;
      display: flex;
      .goBack,.butList{
        cursor: pointer;
        display: flex;
        padding: 0 10px;
        align-items: center;
        .look,.open{
          display: inline-block;
          padding: 5px 10px;
          border: solid 1px #3345ff;
          color:#3345ff;
          font-size: 14px;
          border-radius: 3px;
          cursor:pointer;
          margin-left: 10px;
        }
        .open{
          background: #3345ff;
          color:#fff;
        }
      }
      .topBox {
        display: flex;
        text-align: center;
        width: 500px;
        margin: 0 auto;
        padding: 25px 0;
        .act{
          color:#3345ff;
        }
        span{
          font-weight: bold;
          margin-right: 2px;
        }
      }
      .label {
        flex: 1;
        cursor: pointer;
      }
    }
  }
  @keyframes opacity {
    0%{opacity:0;}
    100%{opacity:1;}
  }
</style>
